<template>
    <div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon1.png" style="width: 24px;height: 18px;margin-right: 4px;">
                    <span>个人信息</span>
                </div>
                <div class="topBtn">
                    <div class="topBtnItem" @click="changeEdit1" v-if="!is_edit1">
                        编辑
                    </div>
                    <div class="topBtnItem2" @click="saveEdit1" style="margin-right: 12px;" v-if="is_edit1">
                        保存
                    </div>
                    <div class="topBtnItem" @click="is_edit1 = false" v-if="is_edit1">
                        取消
                    </div>
                </div>
            </div>
            <el-form ref="ruleFormRef1" :inline="true" label-position="right" label-width="140px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem" prop="name" label="员工姓名：">
                    <span v-if="!is_edit1">{{ user.name }}</span>
                    <el-input v-if="is_edit1" v-model="user.name" placeholder="员工姓名" clearable disabled />
                </el-form-item>
                <el-form-item class="formItem" prop="sex" label="性别：">
                    <span v-if="!is_edit1">{{ user.sex == 0 ? '男' : '女' }}</span>
                    <el-radio-group v-model="user.sex" class="ml-4" v-if="is_edit1" disabled>
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="formItem" prop="birthday" label="出生年月：">
                    <span v-if="!is_edit1">{{ user.birthday }}</span>
                    <el-date-picker v-if="is_edit1" v-model="user.birthday" value-format="YYYY-MM-DD" type="date"
                        placeholder="选择日期" :size="size" style="width: 100%" disabled />
                </el-form-item>
                <el-form-item class="formItem" prop="nation" label="民族：">
                    <span v-if="!is_edit1">{{ user.nation }}</span>
                    <el-input v-if="is_edit1" v-model="user.nation" placeholder="民族" clearable disabled />
                </el-form-item>
                <el-form-item class="formItem" prop="political" label="政治面貌：">
                    <span v-if="!is_edit1">{{ user.political }}</span>
                    <el-select v-if="is_edit1" v-model="user.political" placeholder="选择政治面貌" clearable>
                        <el-option v-for="item in politicaloptions" :key="item.name" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formItem" prop="marital" label="婚姻状态：">
                    <span v-if="!is_edit1">{{ user.marital }}</span>
                    <el-select v-if="is_edit1" v-model="user.marital" placeholder="选择婚姻状况" clearable>
                        <el-option v-for="item in optionsmarital" :key="item.name" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formItem" prop="id_card" label="身份证号：">
                    <span v-if="!is_edit1">{{ user.id_card }}</span>
                    <el-input v-if="is_edit1" v-model="user.id_card" placeholder="身份证号" clearable disabled />
                </el-form-item>
                <el-form-item class="formItem" prop="IdCardTimestart" label="身份证有效期：">
                    <span v-if="!is_edit1">{{ user.IdCardTimestart }} - {{ user.IdCardTimeend }}</span>
                    <div class="flex" v-if="is_edit1">
                        <el-date-picker v-model="user.IdCardTimestart" value-format="YYYY-MM-DD" type="date"
                            placeholder="选择日期" :size="size" style="width: 40%" disabled />
                        <span class="ml10 mr10">-</span>
                        <el-date-picker v-model="user.IdCardTimeend" value-format="YYYY-MM-DD" type="date"
                            placeholder="选择日期" :size="size" style="width: 40%" disabled />
                    </div>
                </el-form-item>
                <el-form-item class="formItem" prop="family_address" label="家庭住址：">
                    <span v-if="!is_edit1">{{ user.family_address }}</span>
                    <el-input v-if="is_edit1" v-model="user.family_address" placeholder="家庭住址" clearable disabled />
                </el-form-item>
                <el-form-item class="formItem" prop="census_register" label="户籍类型：">
                    <span v-if="!is_edit1">{{ user.census_register }}</span>
                    <el-select v-if="is_edit1" v-model="user.census_register" placeholder="选择户籍类型" clearable>
                        <el-option v-for="item in census_registeroptions" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item class="formItem" prop="domicile_address" label="现住地址：">
                    <span v-if="!is_edit1">{{ user.domicile_address }}</span>
                    <el-input v-if="is_edit1" v-model="user.domicile_address" placeholder="现住地址" />
                </el-form-item>
                <el-form-item class="formItem" prop="height" label="身高：">
                    <span v-if="!is_edit1">{{ user.height }}cm</span>
                    <el-input v-if="is_edit1" v-model="user.height" placeholder="身高">
                        <template #append>cm</template>
                    </el-input>
                </el-form-item>
                <el-form-item class="formItem1" prop="weight" label="体重：">
                    <span v-if="!is_edit1">{{ user.weight }}kg</span>
                    <el-input v-if="is_edit1" v-model="user.weight" placeholder="体重">
                        <template #append>kg</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon2.png" style="width: 18px;height: 20px;margin-right: 4px;">
                    <span>紧急联系人</span>
                </div>
                <div class="topBtn">
                    <div class="topBtnItem" @click="changeEdit2" v-if="!is_edit2">
                        编辑
                    </div>
                    <div class="topBtnItem2" @click="saveEdit2" style="margin-right: 12px;" v-if="is_edit2">
                        保存
                    </div>
                    <div class="topBtnItem" @click="is_edit2 = false" v-if="is_edit2">
                        取消
                    </div>
                </div>
            </div>
            <el-form ref="ruleFormRef2" :inline="true" label-position="right" label-width="140px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem1" prop="urgentman" label="紧急联系人：">
                    <span v-if="!is_edit2">{{ user.urgentman }}</span>
                    <el-input v-if="is_edit2" v-model="user.urgentman" placeholder="紧急联系人" clearable />
                </el-form-item>
                <el-form-item class="formItem1" prop="relationship" label="关系：">
                    <span v-if="!is_edit2">{{ user.relationship }}</span>
                    <el-input v-if="is_edit2" v-model="user.relationship" placeholder="关系" clearable />
                </el-form-item>
                <el-form-item class="formItem1" prop="urgentmobile" label="联系方式：">
                    <span v-if="!is_edit2">{{ user.urgentmobile }}</span>
                    <el-input v-if="is_edit2" v-model="user.urgentmobile" placeholder="联系方式" clearable />
                </el-form-item>
            </el-form>
        </div>
        <div class="userInfo">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon3.png" style="width: 20px;height: 14px;margin-right: 4px;">
                    <span>工资卡信息</span>
                </div>
                <div class="topBtn">
                    <div class="topBtnItem" @click="changeEdit3" v-if="!is_edit3">
                        编辑
                    </div>
                    <div class="topBtnItem2" @click="saveEdit3" style="margin-right: 12px;" v-if="is_edit3">
                        保存
                    </div>
                    <div class="topBtnItem" @click="is_edit3 = false" v-if="is_edit3">
                        取消
                    </div>
                </div>
            </div>
            <el-form ref="ruleFormRef3" :inline="true" label-position="right" label-width="140px" :model="user"
                :rules="rules" class="form-inline">
                <el-form-item class="formItem1" prop="salary_card" label="工资卡号：">
                    <span v-if="!is_edit3">{{ user.salary_card }}</span>
                    <el-input v-if="is_edit3" v-model="user.salary_card" placeholder="工资卡卡号" clearable />
                </el-form-item>
                <el-form-item class="formItem1" prop="opening_bank" label="开户行：">
                    <span v-if="!is_edit3">{{ user.opening_bank }}</span>
                    <el-input v-if="is_edit3" v-model="user.opening_bank" placeholder="开户行" clearable />
                </el-form-item>
            </el-form>
        </div>
        <div class="userInfo" style="border-bottom: 0px solid #eaeaea;">
            <div class="topBox">
                <div class="topTitle">
                    <img src="../../../assets/image/zxl/icon4.png" style="width: 18px;height: 16px;margin-right: 4px;">
                    <span>附件</span>
                </div>
                <!-- <div class="topBtn">
                    <div class="topBtnItem">
                        编辑
                    </div>
                </div> -->
            </div>
            <button class="uploadBtn1" @click="open = true">
                <div>
                    <img src="../../../assets/image/zxl/icon5.png">
                    <span>上传文件</span>
                </div>
            </button>
            <div style="margin-left: 28px;">
                <el-table :data="tableData" height="250" class="custom-table" style="width: 100%;">
                    <el-table-column prop="filename" label="文件名称" align="center" style="width: 33.3%" />
                    <el-table-column prop="create_time" label="上传时间" align="center" style="width: 33.3%" />
                    <el-table-column fixed="right" label="操作" align="center" style="width: 33.3%">
                        <template #default="{ row }">
                            <el-button link type="primary" size="small" @click.stop="downloadFile(row)">
                                下载
                            </el-button>
                            <el-button link type="primary" size="small" @click.stop="deleteFiles(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                    <template #empty>
                        <img src="../../..//assets/image/zxl/noData.png" width="94" style="width: 94px;height: 86px;" />
                    </template>
                </el-table>
                <!-- <Pagination style="justify-content: end;" :total="total" :current-page="pageInfo.page"
                    :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" /> -->
            </div>
        </div>
        <el-dialog v-model="open" title="上传合同" width="646" :before-close="handleClose">
            <el-form ref="ruleFormRef4" label-position="right" label-width="120px" :model="htForm" class="form-inline"
                style="display: flex;align-items: center;">
                <el-form-item class="formItem2" label="选择上传文件：" height="160">
                    <el-upload ref="uploadBox" class="upload-demo" drag name="file" :auto-upload="false"
                        :data="{ id: user.id, type: 0 }" :headers="{ token: token }"
                        action="https://demo-api.niuyuwang.com/hr/user/save_file" :on-success="uploadFileSuccess"
                        :on-error="uploadFileFail" :before-upload="beforeAvatarUpload">
                        <img src="../../../assets/image/zxl/icon14.png" style="width: 32px;height: 32px;">
                        <div class="tip1">点击或拖拽上传</div>
                        <div class="tip2">文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="small" @click="open = false">取消</el-button>
                    <el-button type="primary" color="#01509f" size="small" @click="uploadFile">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, defineEmits } from '@/TUIKit/adapter-vue';
import type { FormInstance, FormRules, ElMessage, ElMessageBox, UploadInstance, UploadProps } from 'element-plus'
import { save_salary, save_urgent, save_person, getpolitical, getmarital } from "@/api/cf";
import { getFileList, deleteFile } from "@/api/xl";
const props = defineProps({
    user: {
        type: Object,
        default: () => ({}) // 对象/数组默认值需返回函数
    }
})
onMounted(() => {
    console.log(props.user)
    getpolitical().then(res => {
        politicaloptions.value = res.data;
    });
    getmarital().then(res => {
        optionsmarital.value = res.data;
    });
    setTimeout(() => {
        getList()
    }, 1000)
});
interface RuleForm {
    name: string
    sex: number
    birthday: string
    nation: string
    political: string
    marital: string
    id_card: string
    IdCardTimestart: string
    family_address: string
    census_register: string
    domicile_address: string
    height: string
    weight: string
    urgentman: string
    relationship: string
    urgentmobile: string
}
const emits = defineEmits(['updateData']);
const ruleFormRef1 = ref(null)
const ruleFormRef2 = ref(null)
const ruleFormRef3 = ref(null)
const ruleFormRef4 = ref(null)
const uploadBox = ref(null)
const open = ref(false)
const token = localStorage.getItem('token')
const htForm = ref(null)

const politicaloptions = ref([]);
const optionsmarital = ref([]);
const census_registeroptions = ref(["本地城镇", "本地农村", "外地城镇", "外地农村"]);

const tableData = ref([])
const total = ref(100)
const is_edit1 = ref(false)
const is_edit2 = ref(false)
const is_edit3 = ref(false)
const pageInfo = reactive({
    page: 2,
    limit: 10
})
const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.page = page
    pageInfo.limit = size
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    console.log(rawFile)
    if (rawFile.type !== 'application/vnd.ms-excel' && rawFile.type !== 'application/x-zip-compressed' && rawFile.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' && rawFile.type !== 'text/plain' && rawFile.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && rawFile.type !== 'application/msword' && rawFile.type !== 'application/pdf' && rawFile.type !== 'application/zip') {
        ElMessage.error('文件格式：".xls", ".xlsx", ".doc", ".docx", ".pdf", ".zip", ".txt"')
        return false
    }
    return true
}

const rules = reactive<FormRules<RuleForm>>({
    name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
    sex: [{ required: true, message: "请选择性别", trigger: "change" }],
    id_card: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
    IdCardTimestart: [{ required: true, message: "请选择有效期", trigger: "change" }],
    family_address: [{ required: true, message: "请输入家庭地址", trigger: "blur" }],
    census_register: [{ required: true, message: "请选择户籍类型", trigger: "change" }],
    domicile_address: [{ required: true, message: "请输入现住地址", trigger: "blur" }],
    urgentman: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' }],
    relationship: [{ required: true, message: '请输入关系', trigger: 'blur' }],
    urgentmobile: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
})

const uploadFile = () => {
    uploadBox.value!.submit();
}
const uploadFileSuccess = () => {
    ElMessage({
        message: '上传成功',
        grouping: true,
        type: "success",
    });
    uploadBox.value!.clearFiles()
    open.value = false;
    setTimeout(() => {
        getList()
    }, 500)
}
const uploadFileFail = () => {
    ElMessage({
        message: '上传失败',
        grouping: true,
        type: "success",
    });
    uploadBox.value!.clearFiles()
    open.value = false;
    setTimeout(() => {
        getList()
    }, 500)
}
const getList = () => {
    getFileList({
        id: props.user.id,
        type: 0
    }).then(res => {
        tableData.value = res.data
    });
}
const downloadFile = (row) => {
    const url = row.url; // 替换为实际文件 URL
    const a = document.createElement('a');
    a.href = url;
    a.download = row.filename; // 自定义下载文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
const deleteFiles = (row) => {
    ElMessageBox.confirm("是否确定删除?", "操作提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "ExitConfirmButton",
    }).then((action: Action) => {
        if (action === "confirm") {
            deleteFile({
                id: row.id
            }).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                getList()
            });
        }
    });
}
const handleClose = (done: () => void) => {
    done()
}
const changeEdit1 = () => {
    is_edit1.value = true
}
const saveEdit1 = () => {
    ruleFormRef1.value.validateField(["name", "sex", "id_card", "IdCardTimestart", "family_address", "census_register", "domicile_address"], res => {
        if (res) {
            console.log("表单验证成功");
            save_person({
                id: props.user.id,
                name: props.user.name,
                IdCardFaceImg: props.user.IdCardFaceImg,
                IdCardBackImg: props.user.IdCardBackImg,
                sex: props.user.sex,
                birthday: props.user.birthday,
                nation: props.user.nation,
                political: props.user.political,
                marital: props.user.marital,
                id_card: props.user.id_card,
                IdCardTimestart: props.user.IdCardTimestart,
                IdCardTimeend: props.user.IdCardTimeend,
                family_address: props.user.family_address,
                census_register: props.user.census_register,
                domicile_address: props.user.domicile_address,
                height: props.user.height,
                weight: props.user.weight
            }).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                is_edit1.value = false
                emits('updateData');
            });
        } else {
            console.log("表单验证失败");
            return false;
        }
    });
}
const changeEdit2 = () => {
    is_edit2.value = true
}
const saveEdit2 = () => {
    ruleFormRef2.value.validateField(["urgentman", "relationship", "urgentmobile"], res => {
        if (res) {
            console.log("表单验证成功");
            save_urgent({
                id: props.user.id,
                urgentman: props.user.urgentman,
                relationship: props.user.relationship,
                urgentmobile: props.user.urgentmobile,
            }).then(res => {
                ElMessage({
                    message: res.msg,
                    grouping: true,
                    type: "success",
                });
                is_edit2.value = false
                emits('updateData');
            });
        } else {
            console.log("表单验证失败");
            return false;
        }
    });
}
const changeEdit3 = () => {
    is_edit3.value = true
}
const saveEdit3 = () => {
    save_salary({
        id: props.user.id,
        salary_card: props.user.salary_card,
        opening_bank: props.user.opening_bank,
    }).then(res => {
        ElMessage({
            message: res.msg,
            grouping: true,
            type: "success",
        });
        emits('updateData');
    });
    is_edit3.value = false
}
defineExpose({
    changeEdit1,
    changeEdit2,
    changeEdit3
})
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label {
    font-size: 16px;
    /* 设置你需要的字体大小 */
}

::v-deep .el-form-item__content * {
    font-size: 16px;
    /* 设置你需要的字体大小 */
}

.upload-demo {
    width: 450px;

    ::v-deep .el-upload-dragger {
        background-color: #f7f7f7;
        width: 458px;
        height: 160px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .el-upload-list {
        width: 450px !important;
    }

    .tip1 {
        color: #666;
        font-size: 14px;
    }

    .tip2 {
        color: #999;
        font-size: 14px;
    }
}


.userInfo {
    padding: 12px 0 31px 0;
    border-bottom: 1px solid #eaeaea;
    // display: flex;
    // flex-wrap: wrap;

    .form-inline {
        margin-top: 32px;
        // display: flex;
        // flex-wrap: wrap;
        padding: 0 17px;

        .formItem {
            width: 31%;
            margin-bottom: 40px;
            font-size: 20px;
        }

        .formItem1 {
            width: 31%;
            font-size: 18px;
        }
    }

    .topBox {
        display: flex;
        align-items: center;

        .topTitle {
            display: flex;
            align-items: center;
            flex: 1;
            font-size: 16px;
            color: #01509f;
        }

        .topBtn {
            display: flex;
            align-items: center;

            .topBtnItem {
                cursor: pointer;
                width: 42px;
                height: 30px;
                color: #01509f;
                border: 1px solid #01509f;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
            }

            .topBtnItem2 {
                cursor: pointer;
                width: 42px;
                height: 30px;
                background-color: #01509f;
                color: #ffffff;
                border-radius: 6px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
            }

            .topBtnItem2:hover {
                transform: scale(1) translateY(-2px) !important;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            .topBtnItem:hover {
                transform: scale(1) translateY(-2px) !important;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }
        }
    }

    .uploadBtn1:hover {
        transform: scale(1) translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .uploadBtn1 {
        margin: 19px 0 16px 28px;
        cursor: pointer;
        background-color: #01509f;
        color: #fff;
        width: 100px;
        height: 30px;
        border: 0px solid #eaeaea;
        font-size: 14px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        div {
            display: flex;
            align-items: center;
        }

        img {
            width: 15px;
            height: 14px;
            margin-right: 3px;
        }

        span {
            font-size: 14px;
            color: #fff;
        }
    }

    .custom-table .el-table__header th {
        color: #666;
        font-size: 16px;
        font-weight: lighter;
    }
}
</style>
